<template>
	<el-container class="home-container">
		<!-- 头部区域 -->
	  <el-header >
		  <div>
			  <img src="../assets/1618741789087_5BA64942-292D-4ee3-8EF1-25FAF625CB6C.png" />
			  <span>电商后台管理系统</span>
		  </div>
		  <el-button type="info" @click="logout">退出</el-button>
	  </el-header>
	  <!-- 页面主体区域-->
	  <el-container class="home-container">
		  <!-- 侧边栏-->
	    <el-aside :width="isCollapse ? '64px' :'200px'">
			<div class="toggle-button" @click="toggleCollapse">|||</div>
			<!-- 侧边栏菜单区域 -->
			 <el-menu background-color="#333744" text-color="#fff"
			      active-text-color="#409EFF" unique-opened :collapse="isCollapse" 
				  :collapse-transition="false" router :default-active="activePath">
				  <!-- 一级菜单-->
			      <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
			        <template slot="title">
			          <i :class="iconsObj[item.id]"></i>
			          <span>{{item.authName}}</span>
			        </template>
			        <!-- 二级菜单-->
			          <el-menu-item :index="'/' + subItem.path" v-for="subItem in item.children" :key="subItem.id"
					  @click="saveNavState('/' + subItem.path)">
						  <template slot="title">
						    <i class="el-icon-menu"></i>
						    <span>{{subItem.authName}}</span>
						  </template>
					  </el-menu-item>
			      </el-submenu>
			    </el-menu>
		</el-aside>
		<!-- 右侧内容主体 -->
	    <el-main>
			<router-view></router-view>
		</el-main>
	  </el-container>
	</el-container>

</template>

<script>
	export default{
		data(){
			return{
				//左侧菜单数据
				menulist:[],
				iconsObj:{
					'125':'iconfont el-icon-s-custom',
					'103':'iconfont el-icon-copy-document',
					'101':'iconfont el-icon-shopping-bag-1',
					'102':'iconfont el-icon-notebook-2',
					'145':'iconfont el-icon-s-platform'
				},
				//是否折叠
				isCollapse:false,
				//被激活得链接地址
				activePath:''
			}
		},
		created(){
			this.getMenuList()
			this.activePath=window.sessionStorage.getItem('activePath')
		},
		methods:{
			logout(){
				window.sessionStorage.clear();
				this.$router.push('/login');
			},
			//获取所有的菜单
			async getMenuList(){
				const{data:res} =await this.$http.get('menus')
				if(res.meta.status !==200) return this.$message.error(res.mate.msg)
				this.menulist=res.data
				console.log(res)
			},
			//点击按钮，切换菜单的折叠与展开
			toggleCollapse () {
				this.isCollapse=!this.isCollapse
			},
			//保存链接得激活状态
			saveNavState(activePath){
				window.sessionStorage.setItem('activePath',activePath)
				this.activePath=activePath
			}
		}
	};
</script>

<style Lang="less" scoped>
	.home-container{
		height: 100%;
	}
	.el-header{
		background-color: #373d41;
		display: flex;
		justify-content: space-between;
		padding-left: 0;
		align-items: center;
		color: #fff;
		font-size: 20px;
	}
	.el-header div{
		display: flex;
		align-items: center;
	}
	.el-header div span{
		margin-left: 15px;
	}
	.el-aside{
		background-color:#333744 ;
	}
	.el-aside .el-menu{
		border-right: none;
	}
	.el-main{
		background-color: #eaedf1;
	}
	.iconfont{
		margin-right:10px ;
	}
	.toggle-button{
		background-color:#4A5064 ;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer;
	}
</style>
